<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- el-tabs 叫做tab栏组件 -->
        <!-- 
          <el-tabs>
            <el-tab-pane label="文字描述1"></el-tab-pane>
            <el-tab-pane label="文字描述2"></el-tab-pane>
            <el-tab-pane label="文字描述3"></el-tab-pane>
          </el-tabs>
         -->
        <el-tabs>
          <el-tab-pane label="登录账户设置">
            <!-- 放置表单  【渲染功能(列表/回显)】 4.渲染数据-->
            <el-form   label-width="120px" :model="user" :rules="rules" ref="form" style="margin-left: 120px; margin-top:30px">
              <el-form-item label="姓名:" prop="username">
                <el-input style="width:300px"  v-model="user.username"  />
              </el-form-item>
              <el-form-item label="密码:">
                <el-input style="width:300px" v-model="user.password2"  placeholder="留空表示不修改" type="password" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="btnOK">更新</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情" >
            <el-row type="flex" justify="end">
                <el-tooltip content="打印个人基本信息">
                    <router-link :to="`/employees/print/${$route.params.id}?type=personal`">
                        <i class="el-icon-printer" />
                    </router-link>
                </el-tooltip>
            </el-row>
            <user-info @update="getUserDetailById"></user-info>
          </el-tab-pane>
          <el-tab-pane label="岗位信息" >
             <el-row type="flex" justify="end">
                  <el-tooltip content="打印岗位信息">
                      <router-link :to="`/employees/print/${$route.params.id}?type=job`">
                          <i class="el-icon-printer" />
                      </router-link>
                  </el-tooltip>
              </el-row>
            <job-info></job-info>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getUserDetailById } from '@/api/user'
import { saveUserDetailById } from '@/api/employees'
import UserInfo from './components/user-info.vue'
import JobInfo from './components/job-info.vue'
  export default {
    name: 'Detail',
    components: {JobInfo,UserInfo},
    props: {},
    data () {
      return {
        //  【渲染功能(列表/回显)】 1.用户信息
        user:{},
        // 验证规则
        rules:{
          username:[{required:true, message:'请输入用户名'}]
        }  
      }
    },
    methods: {
      // 【渲染功能(列表/回显)】 2. 定义方法
      async getUserDetailById(){
        this.user = await getUserDetailById(this.$route.params.id)
      },
      // 提交事件
      async btnOK(){
        // 1. 校验
        await this.$refs.form.validate()
        // 2. 整理提交的数据
        const data = {
          username:this.user.username,
          mobile:this.user.mobile,
          id:this.$route.params.id
        }
        if(this.user.password2) data.password = this.user.password2
        // 3. 数据提交
        await saveUserDetailById(data)
        // 4. 提示成功
        this.$message.success('更新成功')
      }
    },
    created () {
      //  【渲染功能(列表/回显)】 3. 调用数据
       this.getUserDetailById()
    },
  }
</script>
<style   scoped>
</style>